const ColoredBackground = () => (
  <svg
    className="absolute bottom-0 left-0 z-0"
    preserveAspectRatio="xMidYMid slice"
    viewBox="0 0 396 432"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
  >
    <defs>
      <path
        id="color-blob-a"
        d="M5,0 L391,0 C393.761424,-5.07265313e-16 396,2.23857625 396,5 L396,427 C396,429.761424 393.761424,432 391,432 L5,432 C2.23857625,432 3.38176876e-16,429.761424 0,427 L0,5 C-3.38176876e-16,2.23857625 2.23857625,5.07265313e-16 5,0 Z"
      />
    </defs>
    <g fill="none" fillRule="evenodd">
      <mask id="color-blob-b" fill="#fff">
        <use xlinkHref="#color-blob-a" />
      </mask>
      <g mask="url(#color-blob-b)">
        <g transform="translate(-421 -90)">
          <path
            fill="#7114C6"
            d="M97.1884125,360.915081 C170.521746,369.581748 211.855079,402.915081 221.188413,460.915081 C235.188413,547.915081 365.188413,584.915081 469.188413,536.915081 C573.188413,488.915081 721.188413,601.915081 755.188413,719.915081 C777.855079,798.581748 808.855079,675.915081 848.188413,351.915081 C841.052013,252.181103 762.385347,186.514436 612.188413,154.915081 C461.991478,123.315726 290.324812,136.315726 97.1884125,193.915081 L97.1884125,360.915081 Z"
            transform="rotate(-27 472.688 440.546)"
          />
          <path
            fill="#7114C6"
            d="M686,418 C759.333333,426.666667 800.666667,460 810,518 C824,605 954,642 1058,594 C1162,546 1310,659 1344,777 C1366.66667,855.666667 1397.66667,733 1437,409 L1201,212 L686,251 L686,418 Z"
            transform="rotate(-27 1061.5 506.026)"
          />
          <path
            fill="#FC6A74"
            d="M289,341 C362.333333,349.666667 403.666667,383 413,441 C427,528 557,565 661,517 C765,469 913,582 947,700 C969.666667,778.666667 1000.66667,656 1040,332 L804,135 L289,174 L289,341 Z"
          />
          <path
            fill="#FCE96A"
            d="M826.454978,588.26352 C905.454978,509.26352 992.454978,477.26352 1089.45498,581.26352 C1186.45498,685.26352 1313.45498,770.26352 1332.45498,713.26352 C1345.12164,675.26352 1347.12164,545.26352 1338.45498,323.26352 C799.370123,286.058814 498.03679,270.058814 434.454978,275.26352 C370.873165,280.468226 370.873165,321.134893 434.454978,397.26352 C491.121644,506.596853 554.121644,549.26352 623.454978,525.26352 C727.454978,489.26352 747.454978,667.26352 826.454978,588.26352 Z"
            transform="rotate(19 865.252 502.94)"
          />
          <path
            fill="#FC6A74"
            d="M745,457 C818.333333,465.666667 859.666667,499 869,557 C883,644 1013,681 1117,633 C1221,585 1369,698 1403,816 C1425.66667,894.666667 1456.66667,772 1496,448 L1260,251 C985.865656,267.193023 825.198989,279.526356 778,288 C707.201516,300.710466 653,281 664,358 C671.333333,409.333333 698.333333,442.333333 745,457 Z"
          />
        </g>
      </g>
    </g>
  </svg>
)

export default ColoredBackground
